<template>
  <div>
    <el-dialog
        :close-on-click-modal="false"
        title="编辑事件"
        custom-class="app-event-dialog us-none"
        v-model="EventDialogVisible"
        width="20%"
        top="23vh"
        :before-close="handleCloseEventDialog"
    >
      <div>
        <el-form :model="EventInfo" class="demo-form-inline" size="mini" label-width="80px" label-position="left">
          <el-form-item label="事件名称">
            <el-input v-model="EventInfo.EventName" placeholder="请输入事件名称"></el-input>
          </el-form-item>
          <el-form-item label="触发源">
            <el-select
                v-model="EventInfo.TriggerSourceId"
                placeholder="请选择触发源"
                style="width: 100%"
                @change="onEventChange"
            >
              <el-option
                  v-for="item in optionDrivers"
                  :key="item.Id"
                  :label="item.DeviceName"
                  :value="item.Id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="触发地址" v-if="EventInfo.TriggerDevice ==='S71200'">
            <el-select
                v-model="EventInfo.TriggerId"
                placeholder="请选择触发地址"
                style="width: 100%"
            >
              <el-option
                  v-for="item in optionAddress"
                  :key="item.Id"
                  :label="item.Name+' （'+item.Address+'）'"
                  :value="item.Id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="匹配模式">
            <el-select
                v-model="EventInfo.TriggerMode"
                placeholder="请选择触发地址"
                style="width: 100%"
            >
              <el-option
                  v-for="item in TriggerModes"
                  :key="item.value"
                  :label="item.tip"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="触发值" v-if="EventInfo.TriggerMode!=='VALUE_CHANGE'">
            <el-input v-model="EventInfo.TriggerValue" placeholder="请输入触发值"></el-input>
          </el-form-item>
          <el-form-item label="触发流程">
            <el-select
                v-model="EventInfo.TriggerFlow"
                placeholder="请选择流程"
                style="width: 100%"
            >
              <el-option
                  v-for="item in allFlow"
                  :key="item.id"
                  :label="item.Title"
                  :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="EventInfo.Desc" type="textarea" :rows="5" placeholder="请输入描述"></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 0" class="flex-jc-end">
            <el-button round @click="handleCloseEventDialog">取消</el-button>
            <el-button
                type="primary"
                round
                @click="saveEvent"
            >确定
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import EventApi from '@/api/flow/EventApi'
import Utils from '../../utils/Common'
import { AppParams } from '@/utils/appParams'
import { MessageSuccess, MessageWarning } from "@/utils";
import { useFlowStore } from "@/store/modules/flow/flowStore";

export default {
  name: 'AddEventDialog',
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    event: {
      type: Object,
      deep: true,
      immediate: true
    }
  },
  watch: {
    show (v) {
      if (v) {
        this.EventDialogVisible = v
        if (!Utils.IsEmpty(this.event)) {
          this.EventInfo = Object.assign({}, this.event)
        }
        const FlowStore = useFlowStore()
        // FlowStore.UpdateDevice(res => {
        //
        // })
        this.optionDrivers = FlowStore.Device
        this.AllPlcAddress = FlowStore.PlcAddress
        this.allFlow = FlowStore.AllFlow
        this.init()
      }
    }
  },
  data () {
    return {
      allFlow: [],
      optionDrivers: [],
      AllPlcAddress: [],
      optionAddress: [],
      showAddPlcEventAddressDialog: false,
      EventDialogVisible: false,
      currentSelectAddress: null,
      TriggerModes: AppParams.COMMON.MATCHING_MODE,
      EventInfo: {
        Id: null,
        TriggerMode: null,
        TriggerDevice: null,
        TriggerValue: null,
        TriggerSource: null,
        TriggerSourceId: null,
        TriggerId: null,
        TriggerFlow: null,
        EventName: '',
        Desc: null
      }
    }
  },
  methods: {
    /**
     * 保存节点数据
     */
    saveEvent () {
      const ev = this.EventInfo
      if (ev.TriggerMode !== 'VALUE_CHANGE' && Utils.IsEmpty(ev.TriggerValue)) {
        return MessageWarning('触发值不能为空')
      }
      ev.TriggerSource = AppParams.DRIVER_TYPE_PLC
      new EventApi().Install(ev, (res) => {
        if (res.IsSuccess) {
          MessageSuccess('保存成功')
          this.handleCloseEventDialog()
        } else {
          MessageWarning('保存失败：' + res.Message)
        }
      })
    },
    /**
     * 关闭窗口
     */
    handleCloseEventDialog () {
      this.EventDialogVisible = false
      this.EventInfo = {}
      this.$emit('close')
    },
    /**
     * 选中的值
     * @param EventId
     */
    onEventChange (EventId) {
      if (!Utils.IsEmpty(EventId)) {
        let sd = this.optionDrivers.filter(idd => idd.Id === EventId)[0]
        this.EventInfo.TriggerDevice = sd.DeviceModel;
        this.optionAddress = this.AllPlcAddress.filter(p => p.DriverId === EventId)
      }
    },
    init () {
      this.onEventChange(this.EventInfo.TriggerSourceId);
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less">
.app-event-dialog {

}

.delete-plc-address-btn {
}
</style>
